<template>
  <div class="home">
    <breadcrumb-view/>
    <div class="content">
      <div class="menu">
        <div class="menu_title">
          <span>地图管理</span>
          <el-button
              type="text"
              icon="el-icon-plus"
              @click="addFrom"
          ></el-button>
        </div>
        <div v-if="list.length > 0" class="menu_list">
          <template v-for="(item, index) in list">
            <div
                :key="item.mapId"
                :class="[
                'menu_item',
                currentIndex === index ? 'menu_item_active' : '',
              ]"
                @click="getDatils(item.mapId,index)"
            >
              {{ item.mapName }}
              <div>
                <el-button type="text" @click.stop="editForm(item.mapId)">
                  <el-image :src="currentIndex == index ? edit1 : edit"/>
                </el-button>
                <el-button
                    type="text"
                    style="margin-left: 18px"
                    :disabled="item.canDelete == 0"
                    @click.stop="delFrom(item.mapId)"
                >
                  <el-image
                      :src="
                      currentIndex == index && item.canDelete == 1 ? del1 : del
                    "
                  />
                </el-button>
              </div>
            </div>
          </template>
        </div>
        <div
            v-else
            style="
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 100px;
            color: #606266;
          "
        >
          <span>暂无数据</span>
        </div>
      </div>
      <el-container>
        <el-main style="">
          <div style="padding-top: 8px" >
            <EditMap v-if="mapDetail.mapType===0" :ruleForm="mapDetail"/>
            <ViewMap v-if="mapDetail.mapType===1" ref="nodal"/>
          </div>
        </el-main>
      </el-container>
    </div>
    <el-dialog
        :title="title"
        :visible.sync="dialogDictVisible"
        width="600px"
        :before-close="handleClose"
    >
      <el-form
          ref="dictform"
          :model="dictform"
          label-width="100px"
          :rules="rules"
      >
        <el-form-item label="地图名称" prop="mapName">
          <el-input
              v-model="dictform.mapName"
              placeholder="请输入地图名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="地图类型" prop="mapType">
          <el-select v-model="dictform.mapType" placeholder="请选择地图类型" @change="typechange">
            <el-option label="编辑类" :value="0"></el-option>
            <el-option label="查看类" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地图排序" prop="seqNo">
          <el-input-number
              v-model="dictform.seqNo"
              :min="1"
              placeholder="请输入地图排序"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="是否可以删除" prop="canDelete">
          <el-radio-group
              v-model="dictform.canDelete"
              :disabled="title==='编辑地图'"
          >
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="编辑图层" prop="layerEditCode" v-if="dictform.mapType===0">
          <el-select v-model="dictform.layerEditCode" filterable clearable placeholder="请选择编辑图层" size="small">
            <el-option
                v-for="item in options"
                :key="item.layerCode"
                :label="item.layerName"
                :value="item.layerCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参考图层" prop="layerReferCode" v-if="dictform.mapType===0">
          <el-select v-model="dictform.layerReferCode" clearable filterable placeholder="请选择活参考图层" size="small">
            <el-option
                v-for="item in options"
                :key="item.layerCode"
                :label="item.layerName"
                :value="item.layerCode">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDictVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitMap">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {api} from "../server/api";
import breadcrumbView from "../components/breadcrumbView"
import EditMap from  "./EditMap"
import ViewMap from "./ViewMap"
export default {
  name: "fromlist",
  components: {breadcrumbView,EditMap,ViewMap},
  data() {
    return {
      list: [],
      title: '',
      options:[],
      dialogDictVisible: false,
      dictform: {
        mapName: "",
        seqNo: 1,
        moduleId:null,
        canDelete: 1,
        mapType: null,
        isFlow:0,
        layerEditCode:null,
        layerReferCode:null,
        fieldLst:[]
      },
      rules: {
        mapName: [
          {required: true, message: "请输入地图名称", trigger: "blur"},
        ],
        layerEditCode: [
          {required: true, message: '请选择编辑图层', trigger: 'change' }
        ],
        mapType: [
          {required: true, message: "请选择地图类型", trigger: "change"},
        ],
        canDelete: [],
        seqNo: [],
      },
      oldetai:{},
      mapDetail:{mapType:-1},
      canDelete: null,
      edit: require("../assets/img/edit.png"),
      del: require("../assets/img/del.png"),
      edit1: require("../assets/img/edit1.png"),
      del1: require("../assets/img/del1.png"),
      currentIndex: -1,
    };
  },
  mounted() {
    this.getlist();
    this.layerList();
  },
  methods: {
    layerList(){
      api.layerList( { page: 1, limits: 200 }).then(res=>{
        const {records}=res
        this.options=records
        console.log(res)
      })
    },
    typechange(){
      if(this.dictform.mapType===0){
        this.rules.layerEditCode[0].required=true
      }else{
        this.rules.layerEditCode[0].required=false
      }
    },
    getlist() {
      const par = {
        moduleId: this.$route.query.id,
        curPage: 1,
        pageSize: 20000
      }
      api.farmOtherMapLst(par).then((res) => {
        const {itemLst} = res
        console.log(itemLst)
        console.log(this.$route.query.id)
        const lsit=itemLst.filter(val=>{
          return val.moduleId===parseInt(this.$route.query.id)
        })
        this.list = lsit;
        console.log(this.list)
      });
    },
    submitMap() {
      this.$refs["dictform"].validate((valid) => {
        if (valid) {
          if (this.dictform.mapId != undefined) {
            api.farmOtherMapUpd(this.dictform).then(response => {
              this.$message.success("修改成功");
              this.dialogDictVisible = false;
              if(this.dictform.mapType===0){
                this.updatcode();
              }

              this.getlist();

            });
          } else {
            api.farmOtherMapAdd(this.dictform).then(response=>{
              this.$message.success("新增成功");
              this.dialogDictVisible = false;
              this.getlist();
            })
          }
        }
      });
    },
    updatcode(){
      const par={
        "oldLayer":this.oldetai.layerEditCode,   //旧的图层code
        "currLayer":this.ruleForm.isFlow===1?this.dictform.layerEditCode:'',  //新设置的图层code
      }
      api.updateLockAttr(par).then(res=>{
         console.log(res)
      })
      console.log(this.oldetai.layerEditCode)
      console.log(this.dictform.layerEditCode)
    },
    getDatils(id,index) {
       api.farmOtherMapDetail(id).then(res=>{
         if(res.flowTblId){
           res.isFlow=1
         }else{
           res.isFlow=0
         }
         this.mapDetail=res;
         this.currentIndex = index;
         if( this.mapDetail.mapType===1){
           setTimeout(() => {
             this.$refs.nodal.getview(this.mapDetail)
           }, 100);
         }

       })
    },
    delFrom(id) {
      this.$confirm("是否确认删除该地图?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        api.farmOtherMapDel({mapId: id}).then((res) => {
          this.getlist();
          this.mapDetail={mapType:-1};
          this.$message.success("删除成功");
        });
      });
    },
    editForm(id) {
      api.farmOtherMapDetail( id).then((res) => {
        this.dictform=res
        this.dictform.flowTblId? this.dictform.isFlow=0: this.dictform.isFlow=1
        this.oldetai=JSON.parse(JSON.stringify(res))
        this.title = '编辑地图'
        this.dialogDictVisible = true
      })
    },
    addFrom() {
      this.dictform = {
        mapName: "",
        seqNo: 1,
        mapType: null,
        isFlow:0,
        canDelete: 1,
        moduleId:this.$route.query.id,
        fieldLst:[]
      }
      this.title = '新增地图'
      this.dialogDictVisible = true
    },
    handleClose(done) {
      this.$refs.dictform.resetFields();
       done();
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  box-sizing: border-box;
  padding: 0 20px;
  .content {
    box-sizing: border-box;
    display: flex;
    .menu {
      background-color: #ffffff;
      width: 200px;
      min-width: 170px;
      height: calc(100vh - 90px);
      overflow-y: auto;
      margin-right: 7px;
      .menu_title {
        box-sizing: border-box;
        padding: 0 19px 0 7px;
        height: 47px;
        color: rgba(0, 0, 0, 0.85);
        font-size: 12px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(209, 209, 209, 1);
      }
      .menu_list {
        .menu_item {
          box-sizing: border-box;
          height: 40px;
          padding-left: 40px;
          padding-right: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: rgba(102, 102, 102, 1);
          font-size: 12px;
          cursor: pointer;
          &:hover {
            background-color: rgba(67, 201, 168, 0.2);
          }
        }
        .menu_item_active {
          background-color: rgba(67, 201, 168, 0.2);
        }
      }
      // .menu_item
    }
    .el-container {
      background-color: #ffffff;
      height: calc(100vh - 90px);
      overflow-y: auto;
      flex: 1;
      .el-main {
        padding: 0 20px 20px;
      }
      .con-t {
        box-sizing: border-box;
        height: 47px;
        color: rgba(0, 0, 0, 0.85);
        font-size: 12px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        border-bottom: 1px solid rgba(209, 209, 209, 1);
      }
      .containermain {
        padding-top: 20px;
      }
    }
  }
}
</style>
